<template>
	<div class="ipt">
		<div class="add">
			编号:<input type="text"
				v-model="code" /> 品牌名称:<input type="text"
				v-model="productName" />
			<br />
			产品图片地址:<input type="text"
				v-model="imgSrc" />
			价格:<input type="text"
				v-model="price" />
			<input @click="add"
				type="button"
				value="添加" />
		</div>
		品牌名称:<input type="text"
			v-model="keyword"
			placeholder="请输入搜索条件" />
	</div>
	</div>
</template>
<script>
	export default {
		props: {
			oldGoodsList: {
				type: Array,
			},
		},
		data() {
			return {
				code: "",
				productName: "",
				imgSrc: "",
				price: "",
				keyword: "", //搜索关键字
			};
		},
		watch: {
			keyword(newVal) {
				//去oldGoodsList里面搜索,搜索到结果之后,重新给goodsList赋值
				console.log(newVal);
				console.log(this.oldGoodsList);

				//根据newVal用户输入的搜索关键字去oldGoodsList中的每个对象中的productName这个字段中进行indexOf搜索,结合filter,返回搜索结果不等于-1的选项
				let result = this.oldGoodsList.filter(
					(item) => item.productName.indexOf(newVal) !== -1
				);
				//将搜索的结果传递给父组件
				this.$emit("search", result);
			},
		},
		methods: {
			add() {
				if (!this.code || !this.price || !this.productName || !this.imgSrc) {
					return;
				}
				//声明一个对象,添加到goodsList这个数组中
				let obj = {
					id: Math.random().toString(32).substring(2),
					code: this.code,
					imgSrc: this.imgSrc,
					productName: this.productName,
					price: this.price,
					count: 1,
				};
				//传递给父组件
				this.$emit("add", obj);
			},
		},
	};
</script>
<style scoped>
.add {
	padding: 5px;
	border: 1px solid black;
	margin-bottom: 10px;
}
</style>